<!--
 * @Description: 获取视点组件
 * @Author:       dingyi
 * @Date: 2021-11-03 16:51:52
 * @LastEditors:  dingyi
 * @LastEditTime: 2021-11-03 18:44:56
-->
<template>
  <div class="locationMap">
    <div class="dmap">
      <div id="cesiumContainer" />
    </div>
    <ViewPosition
      ref="refViewPosition"
      @close="close"
      @confirm="confirm" />
    <MapTools />
    <Navigation ref="refNavigation"/>
  </div>
</template>

<script setup>
import { ref, onMounted, defineExpose, defineEmits } from 'vue'
import MapTools from './MapTools.vue'
import Navigation from './Navigation.vue'
import ViewPosition from './ViewPosition.vue'
import dmap from '../../assets/dmap/dmap-es'

const refViewPosition = ref()
const refNavigation = ref()

const emit = defineEmits(['close', 'confirm'])
/**
 * 添加底图
 * @param {Cesium.Viewer} viewer
 */
const addBasicMapLayer = (viewer) => {
  const layer = new dmap.BasicMapLayer({ type: 'arcGIS' })
  viewer.layerCollection.addLayer(layer)
}

/**
 * 初始化地图
 */
const initMap = () => {
  const deafultOptions = {
    targetFrameRate: 60, // 默认渲染循环时的目标帧率
    resolutionScale: 0.1, // 设置渲染分辨率的比例因子
    dataSources: null, // 默认实例集为null
    clock: null, // 默认时钟为null
    automaticallyTrackDataSourceClocks: false,
    terrainShadows: 0, // threejs需要接受光，对象不会投影或接受阴影
    allowTextureFilterAnisotropic: false, // 是否允许纹理过滤器
    contextOptions: {
      webgl: {
        // webgl相关配置
        alpha: false, // 是否可以设置背景色透明
        antialias: true, // 是否开启反锯齿
        preserveDrawingBuffer: true, // 是否保存绘图缓冲，若设为true，则可以提取canvas绘图的缓冲
        failIfMajorPerformanceCaveat: false, // 是否在一个系统性能低的环境创建该上下文
        depth: true, // 是否绘制缓冲区包含一个深度至少为16位的缓冲区
        stencil: false, // 是否使用模板字体或图案
        anialias: false // 是否开启反锯齿
      }
    }
  }
  const viewer = new dmap.DViewer('cesiumContainer', deafultOptions)
  window.viewer = viewer
  // 添加底图
  addBasicMapLayer(viewer)
}

/**
 * 初始化地图
 */
const init = (layerGroupId) => {
  if(!window.viewer) {
    initMap()
    refNavigation.value.init()
  } else {
    window.viewer.layerCollection.removeSurface()
  }
  refViewPosition.value.init(layerGroupId)
}

/**
 * 关闭视点
 */
const close = () => {
  emit('close')
}

/**
 * 视点确认
 */
const confirm = (data) => {
  emit('confirm', data)
}

onMounted(() => {})

defineExpose({
  init
})
</script>

<style scoped lang="less">
.locationMap {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
}
.dmap {
  width: 100%;
  height: 100%;
  #cesiumContainer {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
    font-family: sans-serif;
  }
}
</style>
